<template>
    <div class="code-box-container">
        <div class="code-box-view">
            <slot></slot>
        </div>
        <div class="code-box-meta">
            <span class="code-box-title">
                <slot name="title"></slot>
            </span>
            <span class="code-box-description">
                <slot name="description"></slot>
            </span>
        </div>
        <div class="code-box-actions">
            <i class="tyus-icon tyus-icon-code" @click.stop="changeCodeShow"></i>
        </div>
        <div class="code-box-code" v-show="isCodeShow">
            <pre><code class="language-html">{{ sourceCode }}</code></pre>
        </div>
    </div>
</template>

<script setup>
import { defineProps, ref, computed, onMounted, nextTick, useSlots } from 'vue';

import Prism from 'prismjs';

const slots = useSlots();

const props = defineProps({
    // 路径
    path: { type: String, default: '', require: true },
});
const sourceCode = ref('');
const isCodeShow = ref(false);

const initCode = async () => {
    const path = `../../${slots.default()?.[0].type.__file.split('/src/')[1]}?raw`;
    sourceCode.value = (await import(/* @vite-ignore */ path)).default.replace(
        /'\.\.\/\.\.\/index'/g,
        `'@tencent/my-kit'`,
    );
    await nextTick();
    Prism.highlightAll();
};

const changeCodeShow = () => {
    isCodeShow.value = !isCodeShow.value;
};

onMounted(() => {
    initCode();
});
</script>

<style lang="scss" scoped>
@use '../../assets/styles//codePage.scss';

.code-box-container {
    --code-box-border-color: var(--color-gray-4);
    --code-box-border-radius: var(--border-radius-large);

    width: 50%;
    border: 1px solid var(--code-box-border-color);
    border-radius: var(--code-box-border-radius);
    box-sizing: border-box;
    .code-box-view {
        @include flex.display-flex;
        flex-wrap: wrap;
        padding: 42px 24px 50px;
        gap: 5px;
    }

    .code-box-meta {
        position: relative;
        padding: 18px 24px 12px;
        box-sizing: border-box;
        border-top: 1px solid var(--code-box-border-color);

        .code-box-title {
            position: absolute;
            top: -12px;
            padding: 0 8px;
            background-color: #fff;
            box-sizing: border-box;
        }
    }

    .code-box-actions {
        @include flex.display-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 0;
        box-sizing: border-box;
        border-top: 1px dashed var(--code-box-border-color);

        i {
            cursor: pointer;
        }
    }

    .code-box-code {
        border-top: 1px solid var(--code-box-border-color);

        pre {
            overflow-y: auto;
        }
    }
}
</style>
